<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/jquery.min.js" type="text/javascript">
			
		</script>
		<title></title>
	</head>
	<body>
		<h3>多选框</h3>
		
		<div id="">
			<input type="checkbox" name="爱好" id="hobby" value="" />跑步
			<input type="checkbox" name="爱好" id="hobby" value="" />爬山
			<input type="checkbox" name="爱好" id="hobby" value="" />羽毛球
			<input type="checkbox" name="爱好" id="hobby" value="" />排球
		</div>
		<div id="">
			<button type="button" name="全选" id="selectAll">全选</button>
			<button type="button" name="取消已选" id="unselectAll">取消已选</button>
			<button type="button" name="反选" id="fs">反选</button>
		</div>
	</body>
	<script type="text/javascript">
	   	
/* 	   $("#selectAll").click(function(){
			$("[id=hobby]").attr("checked",true);
		})
		$("#unselectAll").click(function(){
			$("[id=hobby]").attr("checked",false);
		}) */
		/* 
		 attr方法只能执行一次，jQuery1.8以后规定如果是布尔值（boolean）使用prop方法
		 */
		$("#selectAll").click(function(){
			$("[name=爱好]").prop("checked",true);
		})
		$("#unselectAll").click(function(){
			$("[name=爱好]").prop("checked",false);
		})
		$("#fs").click(function(){
			$("[id=hobby]").prop("checked",$(this).checked)
		})
	</script>
</html>
